<template>
  <el-header>
    <div style="width: 100%">
      <navigator></navigator>
    </div>
  </el-header>
  <el-container class="container">
    <el-aside>
      <h3 class="title">个人中心</h3>
      <el-menu
        :uniqueOpened="true"
        :default-active="$route.path"
        router
        class="el-menu-vertical-demo"
        background-color="#ffffff"
        text-color="#000000"
        active-text-color="#003399">
        <el-menu-item index="/basicInformation">
          <template #title>
            <span>基本信息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/purse">
          <template #title>钱包</template>
        </el-menu-item>
        <el-menu-item index="/set">
          <template #title>设置</template>
        </el-menu-item>
        <el-menu-item index="/message">
          <template #title>消息提醒</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-card class="card" shadow="always">
        <template #header>
          <div class="card-header">
            <span>账户</span>
          </div>
        </template>
        <div class="account">
          <span>账户余额(人民币)：</span>
        </div>
        <div class="account1">
          <span>{{ purseParams.userBalance}}</span>
        </div>
        <el-button class="button1">充值</el-button>
        <el-button class="button2">提现</el-button>
        <el-button type="text" class="button3" @click="transactionRecord">交易记录</el-button>
      </el-card>
    </el-main>
    <el-dialog title="实名认证" v-model="dialogFormVisible" class="dia" width="33%" :show-close="false" center :closeOnClickModal="false">
      <el-form>
        <el-form-item prop="realName" label="姓名:" label-width="100px">
          <el-input class="na" v-model="realNameAuthentication.realName"></el-input>
        </el-form-item>
        <el-form-item prop="idCardNumber" label="身份证号:" label-width="100px">
          <el-input class="ID" v-model="realNameAuthentication.idCardNumber"></el-input>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <span class="intro">*如果您是第一次使用钱包功能，您需要进行实名认证方可使用</span>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="realName">确 定</el-button>
    </span>
      </template>
    </el-dialog>
  </el-container>
</template>

<script lang="ts" src="./purse.ts">

</script>

<style scoped>
.el-header{
  padding-inline-end: 0px;
  padding-inline-start: 0px;
}
.el-menu-vertical-demo{
  width: 250px;
  font-size: 30px;
}
.title{
  padding-left: 25px;
  width: 200px;
}
.card-header{
  font-size: 25px;
  padding-right: 1200px;
  width: 50px;
}
.card{
  width: 900px;
  margin: 100px 100px;
  height: 250px;
}
.account{
  font-size: 30px;
  padding-right: 1200px;
  width: 300px;
}
.account1{
  font-size: 60px;
  padding-right: 1200px;
  width: 350px;
}
.button1{
  position: absolute;
  color: #003399;
  width: 150px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 1px;
  margin: -100px 210px;
}
.button2{
  position: absolute;
  color: #003399;
  width: 150px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 1px;
  margin: -45px 210px;
}
.button3{
  position: absolute;
  color: #003399;
  margin: 0px 258px;
}
.na{
  width: 300px;
  padding-right: 500px;
}
.ID{
  width: 300px;
  padding-right: 500px;
}
.dialog-footer{
  right: 500px;
}
.intro{
  margin: 0px 30px;
}
</style>
